<template>
  <view class="home">
    <view class="search"><search></search></view>
    <view class="swiper_List">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" indicator-active-color="#FD1745" indicator-color="#5db0d7">
        <swiper-item v-for="item in swiperList" :key="item.targetId">
          <view class="swiper-item" :url="'/subpkg/music_detail/music_detail?' + item.targetId"><image :src="item.pic" mode="widthFix"></image></view>
        </swiper-item>
      </swiper>
    </view>
    <view class="Navrecommend">
      <navigator class="navItem" :url="'../../subpkg/recommend/recommend'">
        <text class="iconfont icon-tuijian-copy"></text>
        <text class="wyf">每日推荐</text>
      </navigator>
      <navigator class="navItem" :url="'../../subpkg/songList_square/songList_square'">
        <text class="iconfont icon-gedan1-copy"></text>
        <text class="wyf">歌单</text>
      </navigator>
      <navigator class="navItem" :url="'../../subpkg/ranking_list/ranking_list'">
        <text class="iconfont icon-paihangbang1-copy"></text>
        <text class="wyf">排行榜</text>
      </navigator>
      <!-- <navigator class="navItem">
        <text class="iconfont icon-diantai2-copy"></text>
        <text class="wyf">电台</text>
      </navigator> -->
      <navigator class="navItem" :url="'../../subpkg/recommendMV/recommendMV'">
        <text class="iconfont icon-recommend2-copy"></text>
        <text class="wyf">推荐MV</text>
      </navigator>
    </view>
    <view class="recommend_container">
      <view class="header">
        <text style="font-weight: 550;">推荐歌单</text>
        <text class="more" @click="navTomore">更多></text>
      </view>
      <scroll-view class="scroll_container" scroll-x enable-flex>
        <view v-for="item in recommeList" :key="item.id" class="RLcontainer" @click="navSongsListDetail(item.id)">
          <image :src="item.picUrl" mode="widthFix"></image>
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>
    <view class="header"><text style="font-weight: 550;  margin-top: 10rpx;">新音乐</text></view>
    <view class="new_songs">
      <view v-for="item in newSongsList" :key="item.id" class="new_container" @click="navTosongsDetail(item.id)">
        <image :src="item.picUrl" mode="widthFix"></image>
        <text>{{ item.song.artists[0].name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      recommeList: [],
      newSongsList: []
    }
  },
  onLoad() {
    this.getSwiperList()
    this.getRecommendList()
    this.getNewSongsList()
  },
  methods: {
    async getSwiperList() {
      const { data: res } = await uni.$http.get('banner', { type: 2 })
      if (res.code !== 200) {
        return uni.$showMsg('轮播图数据获取失败')
      }
      // console.log(res)
      this.swiperList = res.banners
    },
    async getRecommendList() {
      const { data: res } = await uni.$http.get('personalized', { limit: 6 })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('推荐歌单获取失败')
      this.recommeList = res.result
    },
    async getNewSongsList() {
      const { data: res } = await uni.$http.get('personalized/newsong',{limit:12})
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('新歌获取失败')
      this.newSongsList = res.result
    },
    navSongsListDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_list_detail/songs_list_detail?id=' + id
      })
    },
    navTosongsDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_detail/songs_detail?id=' + id
      })
    },
    navTomore() {
      uni.navigateTo({
        url: '../../subpkg/songList_square/songList_square'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 60vh;
}
swiper {
  height: 300rpx;

  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}
.Navrecommend {
  display: flex;
  margin-top: 15rpx;
}
.navItem {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  flex: 2;
}
.navItem .iconfont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  font-size: 50rpx;
  background-color: #fb6485;
  border-radius: 50%;
}
.wyf {
  font-size: 26rpx;
  color: #676e7e;
  margin-top: 15rpx;
}
.scroll_container {
  display: flex;
  height: 30vh;
  overflow: hidden;
  white-space: nowrap;
}
.RLcontainer {
  display: flex;
  flex-direction: column;
  width: 200rpx;
  margin: 14rpx;
  // display: inline-block;
}
.RLcontainer image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.RLcontainer text {
  font-size: 30rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 20rpx 0 20rpx;
  font-size: 32rpx;
}
.more {
  border: 1rpx solid #e9e9e9;
  border-radius: 60rpx;
  padding: 0 20rpx;
  color: #343535;
  // line-height: ;
}
.recommend_container {
  height: 300rpx;
}
.new_songs {
  display: flex;
  flex-wrap: wrap;
  
}
.new_container{
  display: flex;
  flex-direction: column;
  flex: 2;
  margin: 20rpx;
}
.new_container image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
</style>
